import { defineComponent, watchEffect, ref } from 'vue'
import type { PropType } from 'vue'
import type { commonFormState } from '@/types/baseConfig'
import { NSwitch, NInput } from 'naive-ui'
import questionOption from '@/basic/addEdit/questionsOption'
export default defineComponent({
  props: {
    modelValue: {
      type: Object as PropType<commonFormState>,
      default: () => {
        return {}
      }
    }
  },
  emits: ['update:modelValue', 'setting'],
  setup(props, { emit }) {
    const info = ref<commonFormState>(questionOption.commonForm)
    watchEffect(() => {
      if (props.modelValue) {
        info.value = props.modelValue
      }
    })

    /**
     *  变化回调
     * */
    let timer: any = null
    const handOptions = () => {
      if (timer) {
        clearTimeout(timer)
        timer = null
      }
      timer = setTimeout(() => {
        clearTimeout(timer)
        timer = null
        emit('update:modelValue', info.value)
      }, 450)
    }
    return () => (
      <>
        <div class="flex items-center">
          <div class="settingItemTitle">添加时显示/隐藏</div>
          <div class="ml-[10px]">
            <NSwitch v-model:value={info.value.show} onUpdateValue={handOptions} />
          </div>
        </div>
        <div class="mt-5 flex items-center">
          <div class="settingItemTitle">编辑时显示/隐藏</div>
          <div class="ml-[10px]">
            <NSwitch v-model:value={info.value.editShow} onUpdateValue={handOptions} />
          </div>
        </div>
        <div class="mt-5 flex items-center">
          <div class="settingItemTitle">labelKey</div>
          <div class="ml-[10px]">
            <NInput
              v-model:value={info.value.labelKey}
              placeholder="请输入labelKey"
              clearable
              onBlur={handOptions}
            />
          </div>
        </div>
        <div class="mt-5 flex items-center">
          <div class="settingItemTitle">字段名称</div>
          <div class="ml-[10px]">
            <NInput
              v-model:value={info.value.labelName}
              placeholder="请输入字段名称"
              clearable
              onBlur={handOptions}
            />
          </div>
        </div>
      </>
    )
  }
})
